import { reqDetailInfo, reqAddOrUpdateCart } from "@/api";
//封装游客身份模块UUID，生成后保存到浏览器本地存储
import { getUUID } from "@/utils/uuid_token";

//准备 actions 对象：响应组件中用户的动作
const actions = {
    //查询商品详情，需要商品ID
    async getDetailInfo({ commit }, skuId) {
        let result = await reqDetailInfo(skuId);
        if (result.code == 200) {
            commit("GET_DETAIL_INFO", result.data);
        }
    },

    //商品加入购物车action
    async reqAddOrUpdateCart({ commit }, { skuId, skuNum }) {
        //加入购物车，向服务器发送请求，把商品数据给服务器
        //服务器响应后，并没有返回其它数据，只返回 code=200 表示加入购物车成功
        //因此不需要三连环到仓库 VueX 中
        let result = await reqAddOrUpdateCart(skuId, skuNum);
        //使用 async+await 修饰的函数返回 Promise 对象
        if (result.code == 200) {//加入购物车成功
            return "success";
        } else {//加入购物车失败
            return Promise.reject(new Error("failed"));
        }
    },

};

//准备 mutations 对象：修改 state 中的数据
const mutations = {
    //获取结果
    GET_DETAIL_INFO(state, detailInfo) {
        state.detailInfo = detailInfo;
    },
};
//准备 state 对象：保存具体的数据
const state = {
    //state中数据初始化，数据类型对应接口返回的数据类型
    detailInfo: {},
    //记录游客的 UUID 到 state 中
    uuid_token: getUUID()
};

//计算属性
//项目当中 getters 主要的作用是简化仓库中的数据
//可以把组件中需要的数据简化一下，在获取组件的数据时就显得简单
const getters = {
    //处理商品详情的面包屑导航
    categoryView(state) {
        //需要处理数据为空（undefined）的情况
        //起始状态：state.detailInfo起始状态空对象，空对象.categoryView->undefined
        //当前属性值：服务器的数据有值，用服务器的。服务器数据没有回来至少有一个空对象兜底【不能用undefined兜底】
        return state.detailInfo.categoryView || {};
    },
    //处理商品库存信息
    skuInfo(state) {
        return state.detailInfo.skuInfo || {};
    },
    //处理商品属性数据（数组结构）
    spuSaleAttrList(state) {
        return state.detailInfo.spuSaleAttrList || [];
    }
};

//创建并暴露 store
export default {
    actions,
    mutations,
    getters,
    state
}